<template>

  <div
    :id="echartId"
    class="Echarts"
  />

</template>

<script>
import MixinEchart from '@/views/components/MixinEchart'
import { lineAllHydrlogymbq } from '@/api/riskMonitor/flood'
export default {
    name: '',
    mixins: [MixinEchart],
    props: {
        mpId: {
            type: String,
            default: ''
        },
        startTime: {
            type: String,
            default: ''
        },
        endTime: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            echartId: 'waterPressureEcharts',
            myChart: {}
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            this.isLoading = true
            // setTimeout(() => {
            //     this.echartData = {
            //         data: ['10', '13', '16', '19', '1', '8', '6'],

            //         xName: ['11', '12', '13', '14', '15', '16', '17']
            //     }
            //     this.isLoading = false
            //     this.setOptions()
            // }, 1000)

            const param = {
                mpId: this.mpId,
                startTime: this.startTime,
                endTime: this.endTime
            }
            const res = await lineAllHydrlogymbq(param)
            this.echartData.data = res.content[0].hp
            this.echartData.xName = res.content[0].time
            this.isLoading = false
            this.setOptions()
        },
        setOptions() {
            var option = {}
            option = {
                title: {
                    text: ''
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true
                },
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(37, 35, 32, 0.3)',
                    borderColor: 'rgba(235, 206, 142, 1)',
                    padding: [5, 10],
                    textStyle: {
                        // 提示框浮层的文本样式。
                        color: '#B4B4B4',

                        fontSize: 14
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['水压曲线'],
                    itemWidth: this.fontSize * 1,
                    itemHeight: this.fontSize * 0.5,
                    x: 'center',
                    y: 'top',
                    textStyle: {
                        color: this.axisColor,
                        fontSize: (20 / 16) * this.fontSize
                    }
                },
                calculable: true,
                xAxis: [{
                    name: 'h',
                    nameLocation: 'end',
                    nameTextStyle: {
                        align: 'right',
                        padding: [0, 0, this.fontSize, -this.fontSize],
                        fontSize: this.fontSize,
                        color: '#fff'
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartData.xName,
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#6A9BFD',
                            width: 1 // 这里是为了突出显示加上的
                        }
                    },
                    axisTick: {
                        length: 15,
                        alignWithLabel: true,
                        show: true,
                        inside: true,
                        lineStyle: {
                            width: 1
                        }
                    },
                    offset: 5,
                    axisLabel: {
                        show: true,
                        color: this.axisColor,
                        textStyle: {
                            color: this.axisColor,
                            fontSize: this.fontSize
                        }
                    }
                }],
                yAxis: [{
                    name: 'kpa',
                    nameLocation: 'end',
                    minInterval: 1,
                    nameGap: 3,
                    nameTextStyle: {
                        align: 'left',
                        padding: [0, 0, this.fontSize, -this.fontSize],
                        fontSize: this.fontSize,
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },

                    axisLine: {
                        onZero: false,
                        show: true,
                        lineStyle: {
                            color: '#6A9BFD'
                        }
                    },
                    offset: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            // 使用深浅的间隔色
                            color: '#6A9BFD'
                        }
                    }
                }],
                series: [
                    {
                        name: '水压曲线',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: this.fontSize * 0.3,
                        lineWidth: 2,
                        itemStyle: {

                            normal: {
                                color: '#32E9D6 ',

                                borderColor: '#32E9D6 ', // 拐点边框颜色
                                borderWidth: 0.5 // 拐点边框大小
                            }
                        },
                        lineStyle: {
                            color: '#32E9D6',
                            shadowColor: '#32E9D6',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 12,
                            type: 'solid',
                            width: 2
                        },
                        data: this.echartData.data
                    }
                ]
            }
            this.echartInstance.setOption(option)
            // })
        }
    }
}
</script>

<style lang='scss' scoped>
  .Echarts{
    width:100%;
    height:100%;
  }
</style>
